$(function () {

  // 1 初始化 表单组件
  function initComponent() {

    // 1.1 处理 封面上传即时显示
    function renderCover() {
      $("#inputCover").change(function () {
        const file = this.files[0];
        const src = URL.createObjectURL(file);
        $("#coverimg").prop("src", src);
      })
    }

    // 1.2 处理 文章类别
    function getCategorytList() {
      $.get("/admin/category/list", function (res) {
        let html = "<option value=''>所有分类</option>";
        res.data.forEach(item => {
          html += `<option value="${item.id}" >${item.name}</option>`;
        });
        $("#category").html(html);
      })
    }

    // 1.3 处理 日期选择框
    function renderLayuiDate() {
      //执行一个laydate实例
      layui.laydate.render({
        elem: '#articleDate' //指定元素
      });
    }

    // 1.4 处理 富文本
    function renderTimyMce() {
      tinymce.init({
        selector: '#articleContent',
        language: 'zh_CN',//注意大小写
      });
    }

    // 1.1 处理 封面上传即时显示
    renderCover();
    // 1.2 处理 文章类别
    getCategorytList();
    // 1.3 处理 日期选择框
    renderLayuiDate();
    // 1.4 处理 富文本
    renderTimyMce();
  }


  // 1 初始化 表单组件
  initComponent();


  // 2 给发布按钮 绑定点击事件
  $(".btn-edit").click(function () {
    postArticle("已发布");
  })

  // 2 给 草稿按钮 绑定点击事件
  $(".btn-draft").click(function () {
    postArticle();
  })

  // 4 对获取表单数据 和提交 数据 做封装
  function postArticle(state = "") {
    // 2.1 获取前四个参数 formdata 序列化
    // $("form")[0]  jq对象 转原生dom对象
    const formdata = new FormData($("form")[0]);

    // 2.2 手动拼接剩下两个参数  content state
    formdata.append("content", tinyMCE.editors["articleContent"].getContent());
    // 动态传递进来
    formdata.append("state", state);


    // 2.3 发送请求 完成 文章的新增
    $.ajax({
      url: "/admin/article/publish",
      type: "post",
      data: formdata,
      contentType: false,
      processData: false,
      success(res) {
        console.log(res);
        // 2.4 
        // 2.4.1 显示提示框 提示用户发布成功 
        // 2.4.2 设定一个延时器  1.5s  再去跳转 到 文章列表页面即可
        layer.msg(res.msg);
        setTimeout(() => {
          location.href = "article_list.html";
        }, 1500);
      }
    })
  }

})